<template>
  <div class="global-config-data-form">
    <Form class="func-comp-form" :label-width="labelWidth">
      <FormItem label="纯布局编辑模式">
        <Tooltip class="m-l-5px" :max-width="200" placement="left"
                 content="打开此模式，设计器中将无法加载当前激活组件的配置表单，但可以极大提升布局拖拽的性能，建议在低配置的电脑上进行大量组件布局排布的时候打开此模式">
          <i-switch v-model="purenessLayoutEditModel"></i-switch>
        </Tooltip>
      </FormItem>
      <FormItem label="标尺参考线磁吸阈值">
        <Tooltip content="当组件拖拽至距离标尺参考线阈值内时将会自动磁吸" :max-width="200" placement="left">
          <InputNumber size="small" :max="100" :min="0" v-model="rulerGuidesMagnetThreshold" :active-change="false"></InputNumber> px
        </Tooltip>
      </FormItem>
      <FormItem label="组件对齐磁吸阈值">
        <Tooltip content="当组件拖拽时，会根据附近的组件位置进行（居中、上对齐、右对齐、左对齐、右对齐）磁吸，此阈值规定拖拽至多少像素内进行磁吸" :max-width="200" placement="left">
          <InputNumber size="small" :max="100" :min="0" v-model="dragAlignMagnetThreshold" :active-change="false"></InputNumber> px
        </Tooltip>
      </FormItem>
      <FormItem label="自适应画布缩放适配">
        <Tooltip content="打开后，设计器中画布尺寸将会随着浏览器尺寸变化而自动缩放适配" :max-width="200" placement="left">
          <i-switch v-model="adaptionDesignerCanvasZoom"></i-switch>
        </Tooltip>
      </FormItem>
      <FormItemPanel title="自动保存当前编辑页面">
        <FormItem label="开启">
          <i-switch v-model="autoSavePage"></i-switch>
        </FormItem>
        <FormItem label="间隔时间">
          <InputNumber size="small" :max="1000" :min="1" v-model="autoSaveInterval"></InputNumber> 分钟
        </FormItem>
      </FormItemPanel>
    </Form>
  </div>
</template>

<script>
import {mapFields} from 'vuex-map-fields';

export default {
  name: 'GlobalConfigDataForm',
  props: {
    labelWidth: {
      type: Number,
      default: 120
    }
  },
  data() {
    return {}
  },
  mounted() {

  },
  methods: {},
  computed: {
    ...mapFields('designer', ['purenessLayoutEditModel', 'autoSavePage', 'autoSaveInterval', 'rulerGuidesMagnetThreshold', 'dragAlignMagnetThreshold', 'adaptionDesignerCanvasZoom'])
  },
  watch: {}
}
</script>

<style scoped>

</style>
